﻿<template>
    <div class="text">
      <h2 class="title">最近浏览</h2>
      <div class="clear" @click="showModal = true">清除</div>
      <prompt
        :isVisible="showModal"
        @close="handleClose"
        @confirm="handleConfirm"
      ></prompt>
    </div>
    <div class="list">
      <div v-for="item in tableMessage" :key="item.name">
        <TableCard :tableMessage="item"></TableCard>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  import TableCard from "../../table/components/TableCard.vue";
  
  import Prompt from "./Prompt.vue";
  
  const tableMessage = [
    {
      name: "抑郁自评",
      nameAbbr: "SDS",
      text: "简单，快速，直接的把握抑郁症状",
      img: "https://psystatic.fenxapp.com/uploads/0/1/240326/7ef2e007a73ec0b5cb72ace79ce975d1.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_84",
      lable: "专业型",
    },
    {
      name: "MBIT人格测试(48题)",
      nameAbbr: "MBIT",
      text: "国际最为流行的人格评估工具之一，解锁最适合你的性格路径，透视内心，规划未来",
      img: "https://psystatic.fenxapp.com/uploads/0/1/240110/7946df0e7e9d148d04f13e0b9edb8e3f.png?x-oss-process=image/auto-orient,1/interlace,1/resize,m_lfit,w_186,1/format,webp",
      lable: "专业型",
    },
  ];
  const showModal = ref(false);
  
  // 定义处理关闭模态框的方法
  const handleClose = () => {
    showModal.value = false;
  };
  
  // 定义处理确认按钮点击的方法
  const handleConfirm = () => {
    console.log("清除操作执行");
    showModal.value = false;
  };
  </script>
  
  <style scoped>
  .text {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    margin-left: 10px;
  }
  
  .clear {
    margin: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .clear:hover {
    color: #f26101;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    margin: 0 10px;
  }
  
  .title {
    margin: 10px;
    font-size: 16px;
    font-weight: 700;
  }
  </style>
  